<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
    	<title>Facebook Integration</title>
        <fbg:resources/>
    </head>
    <body bgcolor="gray">
    <font face="Verdana" size="2">
    
		<!-- This Javascript will be called when the user logins -->
		<script type="text/javascript">
				FB.Event.subscribe('auth.login', function(response) {
					if (response.session) {
						// logged in and connected user, someone you know
						window.location ="${createLink(controller:'facebookIntegration', action:'auth')}?returnUrl=${createLink(controller:'facebookIntegration', action:'index')}";
					}
				});
		</script>
	  
	  	<!--  This is the login button -->
		<div id="fb-root"></div>
		<fb:login-button autologoutlink="true" size="medium" background="white" length="short" perms="email,publish_stream,user_about_me,friends_about_me,offline_access">
		</fb:login-button>
		
		<!-- Profile -->
		<% if (profile != null ) { %>
		<p>
		<h3>Facebook User Profile</h3>
		Id: <%= profile.id %><br>
		Name: <%= profile.name %><br>	
		Email: <%= profile.email %><br>
		Gender: <%= profile.gender %><br>
		Locale: <%= profile.locale %><br>
		Link: <a href="<%= profile.link %>"><%= profile.link %></a><br>
		</p>
		
		<!-- Friends -->
		<table>
		<tr>
		<td>
			<% for (i in friends['data']) { %>
		        <% if (i != null) { %>
					<li><img src="http://graph.facebook.com/<%= i.id %>/picture"> <%= i.name %> <%= i.id %>
				<% } %>
	        <% } %>
        </td>
        <td valign="top">
        	<h3>Facepile - Social Plugin</h3>
        	<fb:facepile width="550"></fb:facepile>
        	
        	<br><br>
        	
        	<h3>Comments Box - Social Plugin</h3>
        	<fb:comments></fb:comments>
        	
        	<h3>Recommendations - Social Plugin</h3>
        	<fb:recommendations width="550" height="550"></fb:recommendations>
        </td>
        </tr>
        </table>
        
        <% } %>
		
	</font>
    </body>
</html>
